.contact {
  height: 100vh;
  background-image: url("../../assets/svgs/home-bg.svg");
  .container {
    position: relative;
    padding: 48px 56px;
    margin-top: 32px;
    border-radius: 6px;
    background: white;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    .subTitle {
      color: black;
      text-shadow: none;
      font-size: 1.5em;
      margin-bottom: 24px;
    }
    .contactList {
      margin-bottom: 24px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      li {
        height: 48px;
        padding: 4px 24px;
        img {
          height: 100%;
        }
        &:hover {
          img {
            animation: wobble 1s ease-in-out;
          }
          @keyframes wobble {
            0% {
              transform: translateY(0%);
            }
            15% {
              transform: translateY(-25%);
            }
            30% {
              transform: translateY(20%);
            }
            45% {
              transform: translateY(-15%);
            }
            60% {
              transform: translateY(10%);
            }
            75% {
              transform: translateY(-5%);
            }
            100% {
              transform: translateY(0%);
            }
          }
        }
      }
    }
  }
  .emailBtn {
    position: relative;
    font-size: 2em;
    &::before {
      content: "";
      position: absolute;
      top: -3px;
      bottom: -3px;
      left: -3px;
      right: -3px;
      animation: pulse 2s cubic-bezier(0.57, 0.06, 0.27, 0.84) infinite;
      border-radius: 4px;
      border: 3px solid #409eff;
      background: transparent;
      z-index: 1;
    }
    @keyframes pulse {
      0% {
        transform: scale(1, 1);
        border-color: #409eff;
      }
      100% {
        transform: scale(1.1, 1.3);
        border-color: transparent;
      }
    }
  }
  @media screen and (max-width: 786px) {
    & {
      .container {
        padding: 16px;
      }
      .emailBtn {
        font-size: 1.2em;
      }
    }
  }
}
